{include file="public/header"/}
<link rel="stylesheet" href="/public/static/admin/easyui/layui-v2.6.8/css/layui.css">
<link rel="stylesheet" type="text/css" href="/public/static/admin/easyui/jeasyui/themes/icon.css">
<style>
    .wrap{padding: 10px 20px; background: #fff;}
  .grid-wrap{
      /* height: 205px;  */
      height: auto;
    width: 100%; margin-top:10px;}
  .target_box ul{
    width: 170px;
    padding: 10px;
    border: 1px solid #aaa;
    background-color: #fff;
    height: 150px;
    overflow: auto;
  }
  .shadow {
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,.4);
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.4);
    box-shadow: 1px 1px 3px rgba(0,0,0,.4);
  }
  /*头部按钮及提示样式*/
  #user-field {
    padding: 6px 35px;
    font-family: '微软雅黑';
  }
  #user-field #setEdit{
    display: block;
    float: left;
    background-image: linear-gradient(-180deg, #FAFAFA 0%, #EDEDED 100%);
    border: 1px solid #DEDEDE;
    border-radius: 4px;
    color: #4A4A4A;
    font-size: 12px;
    padding: 0 27px;
    line-height: 28px;
    font-weight: normal;
  }
  #user-field .description{
    padding-left: 60px;
    display: inline-block;
    position: relative;
    color: #9B9B9B;
  }

  #user-field .description .space {
    position: absolute;
    border-width: 0 1px;
    border-style: solid;
    border-color: #DEDEDE;
    width: 322px;
    height: 20px;
    left: 30px;
    top: 9px;
  }

  /*单选选项弹出层样式*/
  #valueList li{
    line-height: 26px;
  }
  #valueList li .delitem{
    background: url(/public/static/admin/css/img/btn_descease_normal.png)  center right no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    float: right;
    margin-right: 10px;
    cursor: pointer;
  }
  #valueList li .ui-input{
    width:150px;
  }
  #valueList li .additem{
    background: url(/css/img/btn_finish.png) center right no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    float: right;
    position: absolute;
    right: 9px;
    top: 5px;
  }
  #valueList li label{
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }

  /*自定义字段删除*/
  .ui-jqgrid-bdiv .ui-state-red {
    background: rgba(255, 102, 121, 0.1);
    position: relative;
  }
  .ui-jqgrid-bdiv .ui-icon-trashDel {
    position: absolute;
    background: url(/public/static/admin/css/img/btn_descease_normal.png) no-repeat;
    width: 18px;
    height: 18px;
    right: 22px;
    margin-top: 10px;
    top: 0;
    cursor: pointer;
  }
  .ui-jqgrid tr.ui-row-ltr td{text-align: center;position: relative;}
</style>
<div class="wrap">
    <div id="user-field">
      <a id="setEdit" class="ui-btn ui-btn-bill ui-btn-add">编辑</a>
      <span class="description" style="font-size: 12px;">
        <label>1、提供5个自定义字段，字段名称不超过6个汉字</label>
        <br>
        <label class="red">2、字段类型保存后不能修改，请谨慎设置</label>
        <br>
        <label class="red">3、字段名称修改，单据列表自定义字段默认全部显示</label>
        <div class="space"></div>
      </span>
    </div>
    <div class="grid-wrap">
      <table id="grid"></table>
    </div>


    <!-- 仓库 -->
  <div id="batch" style="display:none;">
    <div class="pr" id="elem_batch">
      <input type="text" class="textbox storageAuto customelement ui-combo-active" name="locationName"
        autocomplete="off" id="1_locationName" style="outline: -webkit-focus-ring-color auto 5px;">
      <span class="ui-icon-triangle-1-s" onclick="batchSelect()"></span>
    </div>
  </div>
  <!-- 仓库弹窗 -->
  <div class="ui-droplist-wrap" id="chooseBatch"
    style="position: absolute; top: 231.891px; z-index: 1000; width: 162px; display: none; left: 617px;">
    <div style="position: fixed;width: 100%;height: 100%;top: 0;left: 0;background-color: rgba(0,0,0,0);"
      onclick="closeBatch()"></div>
    <div class="droplist" style="position: relative; overflow: auto; min-height: 100px; height: 100px;">
      <div class="list-item" id="0" title="文本">文本</div>
      <div class="list-item" id="1" title="日期">日期</div>
      <div class="list-item" id="2" title="单选">单选</div>
    </div>
  </div>
  <!--  以隐藏的方式获取仓库的值 -->
  <div style="display:none;">
    <input type="text" id="batchName" value="" autocomplete="off" readonly="">
    <input type="text" id="batchId" value="" autocomplete="off" readonly="">
  </div>

</div>

<script src="/public/static/admin/easyui/layui-v2.6.8/layui.js"></script>
<script type="text/javascript" src="/public/static/admin/easyui/jeasyui/jquery.easyui.min.js"></script>

<script>
    $(document).ready(function () {

        $("#setEdit").on("click", function(e) {
            
          // $("#grid").setColProp("type",{editable:true});
          // $("#grid").editRow(1,true);
        })

      //   grid.on("mouseover", ".k-grid-content tr", function (e) {
      //     var uid = $(this).attr("data-uid");
      //     //得到所选行数据
      //     var row = $("#grid").data("kendoGrid").dataSource.getByUid(uid);
      //     //整行加颜色
      //     $(this).css("background-color", "#CDC8B1");
      //     console.log(row)
      // });
        

        $("#grid").jqGrid({
	    	// url:'/admin/basic/choose_goods.html?ajax=100',
	        datatype: "local",//数据来源，本地数据（local，json,jsonp,xml等）
	        height:'205px',//高度，表格高度。可为数值、百分比或'auto'
	        //width: Public.setGrid().w,
	        //height: Public.setGrid().h,
	        colNames: ["字段名称", "字段类型", "字段值"],
	        colModel:[
	            {name:'name',lable:'字段名称', width:160, editable: true,align: "center"}, 
	            // {name:'type', width:160,lable:'字段类型', editable: true},
                {
                    id:1,
                    name: "type",
                    label: '字段类型',
                    width: 160,
                    link: "inventory",
                    editable: true,
                    edittype: "custom",
                    align: "center",
                    editoptions: {
                        custom_element: function (t, e) {
                        // return $(".storageAuto")[0]
                        var batch = $("#elem_batch");
                        $("#batch").html('<div class="pr" id="elem_batch"><input type="text" class="textbox storageAuto customelement ui-combo-active" name="locationName" autocomplete="off" id="1_locationName" style="outline: -webkit-focus-ring-color auto 5px;"><span class="ui-icon-triangle-1-s" onclick="batchSelect()"></span></div>');
                        return batch;
                        },
                        custom_value: function (t, e, a) {
                        var ba = $("#batchName").val();
                        $("#batchName").val("");//重置赋值
                        return ba;
                        },
                        handle: function () {

                        },
                        trigger: "ui-icon-triangle-1-s"
                    }
                },
	            {name:'val', width:160,lable:'字段值', editable: false,align: "center",formatter: cbox},
	       	],
	       	cellEdit:true,
	       	cellurl : '/',
	       	// cellsubmit:false,
	        rowNum:10,
	       	rowList:[10,20,30],
	        sortname: 'id',
	     	sortorder: "desc",
	     	pagerpos:"left",//分页位置
	     	
	     	pgbuttons:true,//翻页按钮
	     	pagination:true,
	     	altRows: !0,
	        gridview: !0,
	        shrinkToFit: !1,
	        cellLayout: 8,
	        autowidth: !0,
	        pager: "#page",
	        viewrecords: !0,
          checkOnSelect: true,
	        cmTemplate: {
	            sortable: !1,
	            title: !1
	        },
		    loadError: function(t, e, i) {
			    parent.Public.tips({
			        type: 1,
			        content: "操作失败了哦，请检查您的网络链接！"
			    })
			  },
   		});

       function cbox(cellvalue, options, rowObject) {
        return '<div class="ui-icon-trashDel">&nbsp;</div>'
      }

     

        //    循环表格
        var mydata = [];
        for (var i = 0; i < 5; i++) {
            var obj = { name: "", type: "", val: "-"}
            mydata.push(obj);
        };
        for ( var i = 0; i <= mydata.length; i++){
            jQuery("#grid").jqGrid('addRowData', i + 1, mydata[i]);
        }


        // 选择字段类型弹窗
        $(".grid-wrap").on("click", ".ui-icon-triangle-1-s", function (e) {
        var top = $(this).parent(".pr").offset().top;
        var left = $(this).parent(".pr").offset().left;
        $("#chooseBatch").show();
        $("#chooseBatch").css({ "top": (top + 30) + "px", "left": (left-5) + "px" })
        })
        // 字段类型选择鼠标移入移出
        $(".ui-droplist-wrap .droplist .list-item").hover(function () {
        $(this).addClass("on");
        }, function () {
        $(this).removeClass("on");
        })
        // 点击选择字段类型
        $(".ui-droplist-wrap .droplist").on("click", ".list-item", function (e) {
        var title = $(this).attr("title");
        var id = $(this).attr("id");
        $("#batchId").val(id);
        $("#batchName").val(title);
        $("#chooseBatch").hide();
        })


    });

           

</script>
{include file="public/footer"/}